<template>
    <div id="index">
        <aside class="aside__right">
            <AsideRight />
            <div v-if="state.isShowing" class="mask">123123</div>
        </aside>
        <aside @mouseleave="hideList" class="aside__left">

            <div class="entry logo">
                <img src="/index/test.png" alt="">
                <!-- <span>首页</span> -->
            </div>

            <div @click="trans2('Home')" class="entry unfocus">
                <img class="entry-icon" src="/index/test.png" alt="">
                <span>首页</span>
            </div>
            <div  :class="item.classes" @click="showList(index)" class="entry" v-for="(item, index) in state.indexList"
                :key="index">
                <img class="entry-icon" :src="item.icon" alt="">
                <span>{{ item.text }}</span>
                <div class="selects">
                    <SelectList v-show="item.isShow" :itemTitle="item.text" :items="item.children" />
                </div>
            </div>



            <div class="entry setting">
                <img class="entry-icon" src="/index/test.png" alt="">
                <span>setting</span>
            </div>


        </aside>
    </div>
</template>

<script setup lang="ts">
import { onMounted, defineComponent, reactive } from 'vue';
import AsideRight from './IndexPage/AsideRight.vue';
import SelectList from './IndexPage/SelectList.vue'
import { Item } from './IndexPage/Interfaces';
import { useRouter } from 'vue-router';
import {ElMessage} from 'element-plus'


const state = reactive({
    indexList: [
        {
            icon: "/index/test.png",
            text: "产品",
            isShow: false,
            classes: "",
            url:"ProductIntroduce",
            children: [
                {
                    icon: "/index/test.png",
                    text: "上肢解决方案",
                    isShow: true,
                    classes: "",
                    children: [
                        {
                            icon: "/index/test.png",
                            text: "ArmMotus™ EMU 上肢康复机器人",
                            classes: "",
                            url: "ArmMotusEMU"
                        },
                        {
                            icon: "/index/test.png",
                            text: "ArmMotus™ EMU 上肢康复机器人2",
                            classes: "",
                            url: "ArmMotusEMU"
                        }
                    ]
                },
                {
                    icon: "/index/test.png",
                    text: "下肢解决方案",
                    isShow: true,
                    children: [
                        {
                            icon: "/index/test.png",
                            text: "ArmMotus™ EMU 下肢康复机器人",
                            url: "ArmMotusEMU"
                        },
                        {
                            // icon:"/index/test.png",
                            text: "ArmMotus™ EMU 下肢康复机器人2",
                            url: "ArmMotusEMU"
                        }
                    ]
                }
            ]
        },
        // {
        //     icon: "/index/test.png",
        //     text: "创新",
        //     isShow: false,
        //     children: [
        //         {
        //             icon: "/index/test.png",
        //             text: "只因康复港",
        //             engText: "RehabHub",
        //             url: "https://www.fftai.cn/innovate/rehabhub.php"
        //         },
        //         {
        //             icon: "/index/test.png",
        //             text: "ji器人康复港",
        //             engText: "EXOPS",
        //             url: "https://www.fftai.cn/innovate/rehabhub.php"
        //         },

        //     ]
        // },
        {
            icon: "/index/test.png",
            text: "公司",
            isShow: false,
            children: [
                {
                    text: "公司介绍",
                    url: "CompanyIntroduce"
                },
                {
                    text: "企业文化",
                    url: "Cultrue"
                },
                {
                    text: "招贤纳士",
                    url: "JoinUs"
                }
            ]
        },
        // {
        //     icon: "/index/test.png",
        //     text: "咨询",
        //     isShow: false,
        //     children: [
        //         {
        //             text: "全部",
        //             url: "https://www.fftai.cn/zixun/zixun_all.php"
        //         },
        //         {
        //             text: "新闻动态",
        //             url: "https://www.fftai.cn/zixun/zixun_all.php"
        //         },
        //         {
        //             text: "客户故事",
        //             url: "https://www.fftai.cn/zixun/zixun_all.php"
        //         },
        //     ]
        // }
    ] as Item[],
    isShowing: false
})

defineComponent({
    AsideRight, SelectList
})

onMounted(() => {
    for (let item of state.indexList) {
        item.isShow = false
        item.classes = "unfocus"
    }

})

const showList = (index: number) => {
    for (let item of state.indexList) {
        item.isShow = false
        item.classes = "unfocus"
    }
    state.indexList[index].classes = "focusing"
    console.log(state.indexList[0].classes);
    state.indexList[index].isShow = true
    state.isShowing = true
}
const hideList = () => {
    for (let item of state.indexList) {
        item.isShow = false
        item.classes = "unfocus"
    }
    state.isShowing = false
}

const router = useRouter()
const trans2 = (name:string)=>{
    router.push({
        name:name
    })
}
</script>

<style scoped lang="less">
#index {
    // background-color: aqua;
    display: flex;
    width: 100%;
    height: 100vh;

    aside {}

    .aside__left {
        width: 8rem;
        height: 100vh;
        background-color: rgb(255, 255, 255);
        position: fixed;
        left: 0;

        .entry {
            width: 100%;
            height: 7rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-bottom: 0.15rem solid rgba(0, 0, 0, 0.1);
            background-color: rgb(255, 255, 255);
            padding-top: 1rem;
            cursor: pointer;
            opacity: 1;

            .entry-icon {
                width: 3rem;
                height: 3rem;
                padding-bottom: 0.2rem;
                transition: all 0.1s;
            }

            span {
                font-size: 1.4rem;
                color: rgb(49, 217, 150);
                opacity: 1;
                transition: all 0.1s;
            }

            .selects {
                cursor: auto;
                position: absolute;
                left: 100%;
                top: 0;
                height: 100%;
            }
        }

        .home {
            span {
                color: rgb(0, 255, 98);
            }
        }

        .logo {
            img {
                width: 7rem;
                height: 7rem;
            }

            span {
                display: none;
            }
        }

        .setting {
            padding-bottom: 2rem;
            border: 0;
            position: absolute;
            bottom: 0;
        }
        @keyframes slideIn {
            0%{
                .entry-icon {
                    height: 3rem;
                    width: 3rem;
                }
                span{
                    font-size: 1.4rem;
                }
            }
            50%{
                .entry-icon {
                    height: 3rem;
                    width: 3rem;
                }
                span{
                    font-size: 0rem;
                    display: none;
                }
            }
            100%{
                .entry-icon {
                    height: 6rem;
                    width: 6rem;
                }
                span{
                    display: none;
                }
            }
        }
        .focusing {
            @keyframes iconSlideIn {
                0%{
                    height: 3rem;
                    width: 3rem;
                }
                50%{
                    height: 3rem;
                    width: 3rem;
                }
                100%{
                    height: 6rem;
                    width: 6rem;
                }
            }
            @keyframes textSlideIn {
                0%{
                    font-size: 1.4rem;
                }
                50%{
                    font-size: 0;
                }
                100%{
                    font-size: 0;
                }
            }
            .entry-icon {
                animation: iconSlideIn 0.2s;
                animation-fill-mode: forwards;
            }

            span {
                animation: textSlideIn 0.1s;
                animation-fill-mode: forwards;
            }
        }

        .unfocus {
            
            filter: grayscale(100%);

            .entry-icon {
                width: 3rem;
                height: 3rem;
                padding-bottom: 0.2rem;
            }

            span {
                font-size: 1.4rem;
                color: rgb(49, 217, 150);
                opacity: 1;
            }
        }

    }

    .aside__right {
        width: 100%;
        padding-left: 8rem;
        position: relative;
        @keyframes maskIn {
            0%{
                background-color: rgba(255, 255, 255, 0);
            }
            100%{
                background-color: rgba(0, 0, 0, 0.415);
            }
        }
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            animation: maskIn 0.5s;
            animation-fill-mode: forwards;
        }
    }
}
</style>
